<template>
  <div>
    <a-popconfirm placement="topLeft" ok-text="" cancel-text=""
                  @confirm="changThead"
                  @visibleChange="popShow($event,1)"
                  @cancel="cancel">
      <span slot="icon" />
      <template slot="title">
        <div id="tableSettings" :style="passStyle">
          <p>固定到左侧</p>
          <a-checkbox-group
            v-model="checkedValueLeft"
            @change="fixedLeftChange"
          >
            <div v-for="item in fixedLeft" :key="item.value" class="anclear" style="text-align: left;">
              <a-col :span="14">
                <a-tooltip placement="left">
                  <template slot="title">
                    <span>取消展示</span>  
                  </template>
                  <a-checkbox :value="item.value" :disabled="item.disabled">{{ item.label }}</a-checkbox>
                </a-tooltip>
                
              </a-col>
              <a-col :span="10">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    取消固定到左侧
                  </template>
                  <a-button class="icon-left" size="small" :style="{color:item.fixed==='left'?'blue':'#ddd'}" type="link" @click="fixedF('left',item.value)">
                    <a-icon type="pushpin" />
                  </a-button>
                </a-tooltip>
                
                <a-divider type="vertical" />
                <a-tooltip placement="right">
                  <template slot="title">
                    <span v-if="rightEnough">右侧已满</span> 
                    <span v-else>固定到右侧</span> 
                  </template>
                  <a-button class="icon-right" size="small" :disabled="rightEnough" :style="{color:item.fixed==='right'?'blue':'#ddd'}"
                            type="link"
                            @click="fixedF('right',item.value)">
                    <a-icon type="pushpin" />
                  </a-button>
                  
                </a-tooltip>
                
              </a-col>
            </div>
      
          </a-checkbox-group>
          <p>固定到右侧</p>
          <a-checkbox-group
            v-model="checkedValueRight"
            @change="fixedRightChange"
          >
            <div v-for="item in fixedRight" :key="item.value" class="anclear" style="text-align: left;">
              <a-col :span="14">
                <a-tooltip placement="left">
                  <template slot="title">
                    <span>取消展示</span>  
                  </template>
                  <a-checkbox :value="item.value" :disabled="item.disabled">{{ item.label }}</a-checkbox>
                </a-tooltip>
                
              </a-col>
              <a-col :span="10">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span v-if="leftEnough">左侧已满</span> 
                    <span v-else>固定到左侧</span> 
                  </template>
                  <a-button class="icon-left" size="small" :disabled="leftEnough" :style="{color:item.fixed==='left'?'blue':'#ddd'}"
                            type="link"
                            @click="fixedF('left',item.value)">
                    <a-icon type="pushpin" />
                  </a-button>
                </a-tooltip>
                <a-divider type="vertical" />
                <a-tooltip placement="right">
                  <template slot="title">
                    取消固定到右侧
                  </template>
                  <a-button class="icon-right" size="small" :style="{color:item.fixed==='right'?'blue':'#ddd'}" type="link" @click="fixedF('right',item.value)">
                    <a-icon type="pushpin" />
                  </a-button>
                </a-tooltip>
              </a-col>
            </div>
      
          </a-checkbox-group>
          <a-divider style="margin:10px 0 20px 0" /> 
          <a-checkbox-group
            v-model="checkedValueNotFixed"
            class="notFixed"
          >
            <div v-for="item in notFixed" :key="item.value" class="anclear" style="text-align: left;">
              <a-col :span="14">
                <a-tooltip placement="left">
                  <template slot="title">
                    <span v-if="checkedValueNotFixed.includes(item.value)">取消展示</span>  
                    <span v-else>选中展示</span>  
                  </template>
                  <a-checkbox :value="item.value" :disabled="item.disabled">{{ item.label }}</a-checkbox>
                </a-tooltip>
              </a-col>
              <a-col :span="10">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span v-if="leftEnough">左侧已满</span>
                    <span v-else> 固定到左侧</span>
                  </template>
                  <a-button class="icon-left" size="small" :disabled="leftEnough" :style="{color:item.fixed==='left'?'blue':'#ddd'}"
                            type="link"
                            @click="fixedF('left',item.value,0)">
                    <a-icon type="pushpin" />
                  </a-button>
                </a-tooltip>
                <a-divider type="vertical" />
                <a-tooltip placement="right">
                  <template slot="title">
                    <span v-if="fixedRight.length>=2">右侧已满</span>
                    <span v-else> 固定到右侧</span>
                  </template>
                  <a-button class="icon-right" size="small" :disabled="rightEnough" :style="{color:item.fixed==='right'?'blue':'#ddd'}"
                            type="link"
                            @click="fixedF('right',item.value,0)">
                    <a-icon type="pushpin" />
                  </a-button>
                </a-tooltip>
              </a-col>
            </div>
      
          </a-checkbox-group>
        </div>
        <div class="tableSettingBottomBtn">
          <a-button size="small" type="link" @click="resetF()">重置</a-button>
          <a-button style="margin:0 10px" type="link" size="small" @click="cancelF">取消</a-button>
          <a-button size="small" type="link" @click="confirmF">确定</a-button>
        </div>
      </template>
      <a style="dispaly:inline-block" :size="buttonSize">
        <slot> <a-icon type="setting" /></slot>
      </a>
    </a-popconfirm>


  </div>
</template>
<script>
import {deepCopy} from '@/utils/index.js'

export default {
  name: 'TableSetting',
  props: {
    passStyle: {
      type: Object,
      default: ()=>{
        return {
          width: '220px'
        }
      }
    },
    tableTheadCopy: {
      type: Array,
      default: ()=>[]
    },
    tableThead: {
      type: Array,
      default: ()=>[]
    },
    buttonSize: {
      type: String,
      default: 'small'
    },
    tableScroll: {
      type: Object,
      default: ()=>{
        return { x: 1500, y: 400 } 
      }
    }
  },
  data() {
    return {
      fixedLeft: [],
      checkedValueLeft: [],
      fixedRight: [],
      checkedValueRight: [],
      tableHeadCopyData: [],
      notFixed: [],
      checkedValueNotFixed: [],
      //点击的是谁
      clickEl: '取消'
    }
  },
  computed: {
    leftEnough: function(){
      return this.fixedLeft.length >= 3
    },
    rightEnough: function(){
      return this.fixedRight.length >= 2
    }
  },
  watch: {
    'tableTheadCopy': {
      handler(newValue){
        this.reset(newValue)
      },
      immediate: true
    }
  },
  created(){
    console.log('created')
  },
  methods: {
    resetF(){
      this.clickEl = '重置'
      this.reset(this.tableTheadCopy)
      document.getElementsByClassName('ant-popover-buttons')[0].children[1] &&
      document.getElementsByClassName('ant-popover-buttons')[0].children[1].click()
    },
    reset(newValue){
      console.log('tableTheadCopy改变了 watch开始执行')

      this.tableHeadCopyData = newValue.map(item=>{
        if([null,undefined].includes(item.fixed)){
          this.checkedValueNotFixed = this.checkedValueNotFixed.concat(item.key)
        }
        return { 
          label: item.title, 
          value: item.key, 
          fixed: item.fixed, 
          disabled: item.awaysShow
        }
      })
      this.getFixedLeftRight()
    },
    fixedF(position,value,type = 1){
      if(type === 0){
        this.checkedValueNotFixed = this.checkedValueNotFixed.filter(item=>item !== value)
      }
      this.tableHeadCopyData.forEach((item,index)=>{
        if(item.value === value){
          if(item.fixed === position){
            item.fixed = null
            this.checkedValueNotFixed.push(item.value)
          }else{
            item.fixed = position
          }
          
        }
      })
      this.getFixedLeftRight()
    },
    getFixedLeftRight(){
      let fixedLeft = [],fixedRight = [],checkedValueLeft = [],
        checkedValueRight = [],notFixed = []

      this.tableHeadCopyData.forEach(item=>{
        if(item.fixed === 'left'){
          fixedLeft = fixedLeft.concat(item)
          checkedValueLeft = checkedValueLeft.concat(item.value)
        }else if(item.fixed === 'right'){
          fixedRight = fixedRight.concat(item)
          checkedValueRight = checkedValueRight.concat(String(item.value))

        }else{
          notFixed = notFixed.concat(item)
        }
        
      })
      this.fixedLeft = fixedLeft
      this.fixedRight = fixedRight
      this.checkedValueLeft = checkedValueLeft
      this.checkedValueRight = checkedValueRight
      this.notFixed = notFixed
    },
    changThead(){
      console.log('changThead')
      let showThad = []

      this.tableTheadCopy.forEach(item=>{
        if(this.checkedValueNotFixed.includes(item.key) ||
        this.checkedValueLeft.includes(item.key) ||
        this.checkedValueRight.includes(item.key)
        ){
          let canshu = {
            ...item
          }

          let changedData = this.tableHeadCopyData.filter(res => res.value === item.key)[0]

          canshu.fixed = changedData.fixed

          showThad.push(canshu)
        }
          
      })

      this.$emit('update:tableThead',showThad)
      if(this.tableScroll.x){
        let scroll = {
          x: this.tableScroll.x,
          y: this.tableScroll.y
        }

        scroll.x = showThad.length * 150
        this.$emit('update:tableScroll',scroll)

      }
    },
    confirmF(){
      this.clickEl = '确定'
      document.getElementsByClassName('ant-popover-buttons')[0].children[1] &&
      document.getElementsByClassName('ant-popover-buttons')[0].children[1].click()
    },
    cancelF(){
      this.clickEl = '取消'
      document.getElementsByClassName('ant-popover-buttons')[0].children[0] &&
      document.getElementsByClassName('ant-popover-buttons')[0].children[0].click()
    },
    cancel(){
      this.fixedLeft = deepCopy(this.fixedLeftCopy)
      this.checkedValueLeft = deepCopy(this.checkedValueLeftCopy)
      this.fixedRight = deepCopy(this.fixedRightCopy)
      this.checkedValueRight = deepCopy(this.checkedValueRightCopy)
      this.notFixed = deepCopy(this.notFixedCopy)
      this.checkedValueNotFixed = deepCopy(this.checkedValueNotFixedCopy)
    },
    fixedLeftChange(checkedValue){
      this.fixedLeft.forEach(item=>{
        if(!checkedValue.includes(item.value)){
          item.fixed = null
        }
      })
      this.getFixedLeftRight()
    },
    fixedRightChange(checkedValue){
      this.fixedRight.forEach(item=>{
        if(!checkedValue.includes(item.value)){
          item.fixed = null
        }
      })
      this.getFixedLeftRight()
    },

    popShow(open){
      if(open){
        this.clickEl = '取消'
        this.fixedLeftCopy = deepCopy(this.fixedLeft)
        this.checkedValueLeftCopy = deepCopy(this.checkedValueLeft)
        this.fixedRightCopy = deepCopy(this.fixedRight)
        this.checkedValueRightCopy = deepCopy(this.checkedValueRight)
        this.notFixedCopy = deepCopy(this.notFixed)
        this.checkedValueNotFixedCopy = deepCopy(this.checkedValueNotFixed)
      }else if(this.clickEl === '取消'){
        this.cancel()
      }
    }
  }
}
</script>

<style lang="scss">
#tableSettings{
  .ant-checkbox-group.notFixed{
    max-height: 300px;
    overflow: auto;
  }
  .ant-divider, .ant-divider-vertical{
    margin:0 1px;
  }
}
#tableSettings .ant-checkbox-group{
  width:100%;
}
  .ant-popover-message-title{
    padding-left:0;
  }
  .ant-popover-message .ant-checkbox-wrapper{
    font-size: 12px;
  }
  .ant-popover-message-title>p{
    /* margin-left: -5px; */
    color:#000;
  }
  .ant-popover-message .ant-checkbox-group>div{
    line-height: 1;
  }
  .icon-left{
    transform: rotate(90deg);
    &:hover{
      i{
        color:blue
      }
    }
  }
  .icon-right{
    transform: rotate(180deg);
    &:hover{
      i{
        color:blue
      }
    }
  }
  .ant-popover-buttons{
    display: none;
  }
  .tableSettingBottomBtn{
    text-align: center;
    margin-top: 10px;
  }
</style>
